//自定義
@img-url : '~assets/img/'; //img path
@image-url : '~assets/img/'; //img path
@color-bg: #000; //背景顏色
@color-red:#cd2a30;//红色
@color-green:#a7dc89;//绿色
@color-blue:#61b7e3;//蓝色
@color-fen:#d9598f;//粉色
@color-grey:#64624c;//灰色
@color-hgreen:#2e5042;//深绿
@color-origer:#e96423;//橙色

.keyframes(@name;@rules) {
    @-webkit-keyframes @name {
        @rules();
    }

    @-moz-keyframes @name {
        @rules();
    }

    @-ms-keyframes @name {
        @rules();
    }

    @-o-keyframes @name {
        @rules();
    }

    @keyframes @name {
        @rules();
    }
}

//新增换算rem计算
.px2rem(@attr: 'width', @px, @rem: 108rem) {
    @{attr}: @px/@rem;
}

.px2remWH( @width, @height, @rem: 108rem) {
    .px2rem(width, @width, @rem);
    .px2rem(height, @height, @rem);
}

.px2remBWH(@attr: 'background-size', @width, @height, @rem: 108rem) {
    @{attr}: @width/@rem @height/@rem;
}

.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) {
    .px2rem(top, @top, @rem);
    .px2rem(left, @left, @rem);
    .px2rem(width, @width, @rem);
    .px2rem(height, @height, @rem);
}

.px2remBLWH(@bottom, @left, @width, @height, @rem: 108rem) {
    .px2rem(bottom, @bottom, @rem);
    .px2rem(left, @left, @rem);
    .px2rem(width, @width, @rem);
    .px2rem(height, @height, @rem);
}

.px2remTRBL(@attr: 'width', @top:0, @right:0, @bottom:0, @left:0, @rem: 108rem) {
    @{attr}: @top/@rem @right/@rem @bottom/@rem @left/@rem;
}

//f7架構less方法
.transition(@d) {
    -webkit-transition-duration: @d;
    transition-duration: @d;
}

.delay(@d) {
    -webkit-transition-delay: @d;
    transition-delay: @d;
}

.transform(@t) {
    -webkit-transform: @t;
    transform: @t;
}

.transform-origin(@to) {
    -webkit-transform-origin: @to;
    transform-origin: @to;
}

.translate3d(@x: 0, @y: 0, @z: 0) {
    -webkit-transform: translate3d(@x, @y, @z);
    transform: translate3d(@x, @y, @z);
}

.animation(@a) {
    -webkit-animation: @a;
    animation: @a;
}

.scrollable() {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.flexbox() {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flexbox-inline() {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}

.flex-wrap(@fw) when (@fw =nowrap) {
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: none;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-wrap(@fw) when (@fw =wrap) {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-wrap(@fw) when not (@fw =wrap) and not (@fw =nowrap) {
    -webkit-flex-wrap: @fw;
    -ms-flex-wrap: @fw;
    flex-wrap: @fw;
}

.flex-shrink(@fs) {
    -webkit-flex-shrink: @fs;
    -ms-flex: 0 @fs auto;
    flex-shrink: @fs;
}

.justify-content(@jc) when (@jc =flex-start) {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.justify-content(@jc) when (@jc =flex-end) {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.justify-content(@jc) when (@jc =space-between) {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.justify-content(@jc) when not (@jc =flex-start) and not (@jc =flex-end) and not (@jc =space-between) {
    -webkit-box-pack: @jc;
    -ms-flex-pack: @jc;
    -webkit-justify-content: @jc;
    justify-content: @jc;
}

.align-items(@ai) when (@ai =flex-start) {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.align-items(@ai) when (@ai =flex-end) {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.align-items(@ai) when not (@ai =flex-start) and not (@ai =flex-end) {
    -webkit-box-align: @ai;
    -ms-flex-align: @ai;
    -webkit-align-items: @ai;
    align-items: @ai;
}

.align-content(@ai) {
    -ms-flex-line-pack: @ai;
    -webkit-align-content: @ai;
    align-content: @ai;
}

.align-self(@as) {
    -ms-flex-item-align: @as;
    -webkit-align-self: @as;
    align-self: @as;
}

.clearfix() {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

.hairline(@position, @color) when (@position =top) {
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        height: 1px;
        width: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(50% 0%);
        html.pixel-ratio-2 & {
            .transform(scaleY(0.5));
        }
        html.pixel-ratio-3 & {
            .transform(scaleY(0.33));
        }
    }
}

.hairline(@position, @color) when (@position =left) {
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        width: 1px;
        height: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(0% 50%);
        html.pixel-ratio-2 & {
            .transform(scaleX(0.5));
        }
        html.pixel-ratio-3 & {
            .transform(scaleX(0.33));
        }
    }
}

.hairline(@position, @color) when (@position =bottom) {
    &:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: auto;
        top: auto;
        height: 1px;
        width: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(50% 100%);
        html.pixel-ratio-2 & {
            .transform(scaleY(0.5));
        }
        html.pixel-ratio-3 & {
            .transform(scaleY(0.33));
        }
    }
}

.hairline(@position, @color) when (@position =right) {
    &:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        left: auto;
        bottom: auto;
        width: 1px;
        height: 100%;
        background-color: @color;
        display: block;
        z-index: 15;
        .transform-origin(100% 50%);
        html.pixel-ratio-2 & {
            .transform(scaleX(0.5));
        }
        html.pixel-ratio-3 & {
            .transform(scaleX(0.33));
        }
    }
}

// For right and bottom
.hairline-remove(@position) when not (@position =left) and not (@position =top) {
    &:after {
        display: none;
    }
}

// For left and top
.hairline-remove(@position) when not (@position =right) and not (@position =bottom) {
    &:before {
        display: none;
    }
}

// For right and bottom
.hairline-color(@position, @color) when not (@position =left) and not (@position =top) {
    &:after {
        background-color: @color;
    }
}

// For left and top
.hairline-color(@position, @color) when not (@position =right) and not (@position =bottom) {
    &:before {
        background-color: @color;
    }
}

// Encoded SVG Background
.encoded-svg-background(@svg) {
    @url: `encodeURIComponent(@{svg})`;
    background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}

// Backdrop Blur
.backdrop-blur(@blur) {
    -webkit-backdrop-filter: blur(@blur);
    backdrop-filter: blur(@blur);
}

// Preserve3D
.preserve3d() {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

// No Scrollbar
.no-scrollbar() {
    &::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        opacity: 0 !important;
    }
}

//custom
.box-sizing(@box-sizing: border-box) {
    box-sizing: @box-sizing;
    -moz-box-sizing: @box-sizing;
    /* Firefox */
    -webkit-box-sizing: @box-sizing;
    /* Safari */
}

// Bars Input
.bars-input() {
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    display: block;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border-radius: 5px;
    font-family: inherit;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    padding: 0 8px;
    background-color: #fff;
}

.no-hairlines() {
    &.no-hairlines,
    &.no-hairlines ul,
    &.no-hairlines .content-block-inner {
        .hairline-remove(top);
        .hairline-remove(bottom);
    }
}

.no-hairlines-between() {
    &.no-hairlines-between {
        .item-inner,
        .list-button,
        .item-divider,
        .list-group-title,
        .list-group-title {
            .hairline-remove(bottom);
        }
    }
}

.linear-gradient(@orange,@green) {
    background-image: -webkit-linear-gradient(bottom, @orange, @green);
    background-image: -moz-linear-gradient(bottom, @orange, @green);
    background-image: -o-linear-gradient(bottom, @orange, @green);
    background-image: linear-gradient(to top, @orange, @green);
}

.linear-gradients(@orange,@green,@red) {
    background-image: -webkit-linear-gradient(top, @orange, @green,@red);
    background-image: -moz-linear-gradient(top, @orange, @green,@red);
    background-image: -o-linear-gradient(top, @orange, @green,@red);
    background-image: linear-gradient(top, @orange, @green,@red);
}